<template>
	<view>
		<!-- 选项卡 -->
	   <view style="margin-top: -50rpx;">
		<uni-section>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<!-- 竞标中心 -->
				<view v-if="current === 0" style="padding-top: 30rpx;">
					<view class="common" style="height: 240rpx;">
						<!-- <image src="@/static/business_center/first.jpg" mode=""></image> -->
						<img class="card_img" src="@/static/business_center/first.jpg">
					</view>
					<!-- 招标内容 -->
					<view class="common container" v-for="index in 3" :key="index">
						<view class="containers">
							<view style="height: 50%;width: 100%;display: flex;">
								<view style="width: 20%;height: 100%;">
									<!-- <image src="@/static/business_center/first.webp" mode=""></image> -->
									<img src="@/static/business_center/first.webp" style="width: 100%;height: 100%;">
								</view>
								<view style="position: relative; width: 75%;height: 100%;margin-left: 5%;">
									<text>深圳市企慧通信息技术有限公司</text>
									<text style="position: absolute;top: 50%;left: 1%; color: blue;">已截止</text>
								</view>
							</view>
							<view class="cc">
								<view class="aa"><text class="aa_text">公司地址:深圳南山区</text></view>
								<view class="aa"><text class="aa_text2">所属行业:交通运输与仓储</text></view>
							</view>
							<view class="cc">
								<view class="aa"><text class="aa_text">订单价格:￥<text style="color: red;">5K</text>/月</text></view>
								<view class="aa"><text class="aa_text2">目前投标<text>5</text>人</text></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 1" style="height: 100%;width: 100%;">
					<!-- 招聘广场 -->
					<view style="display: flex;justify-content: center;align-items: center;margin-left: 5%;margin-top: 5%; width: 90%;height: 360rpx;box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);background-color: gray;">
						<view style=" width: 80%;height: 80%;background-color: white;">
							<view style="position: relative; background-color: bisque;">
								<text style="position: absolute;top:0rpx;left: 0rpx;">全盘会计</text>
								<text style="position: absolute;top:0rpx;right: 0rpx;color: blue;margin-right: 0rpx;">7-9k</text>
							</view>
							<view style="position: relative;background-color: red;">
								<text style="position: absolute;top: 64rpx;left: 0rpx;">企慧通信息技术公司</text>
							</view>
							<view style="position: relative;background-color: red;top: 144rpx;font-size: 25rpx;">
								<text style="position: absolute;left: 3%; background-color: gray;border-radius: 10rpx 10rpx">大专</text>
								<text style="position: absolute;left: 15%; background-color: gray;border-radius: 10rpx 10rpx">31-45人</text>
								<text style="position: absolute;left: 34%; background-color: gray;border-radius: 10rpx 10rpx">制造业</text>
								<text style="position: absolute;left: 50%; background-color: gray;border-radius: 10rpx 10rpx">六天制</text>
								<text style="position: absolute;left: 65%; background-color: gray;border-radius: 10rpx 10rpx">3-5年</text>
							</view>
							<view style="margin-top: 200rpx;">
								<text style="margin-left: 0rpx;">微信用户</text>
								<text></text> <text style="margin-left: 130rpx;">深圳-龙岗区</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-section>
	   </view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				items: ['竞标中心', '招聘广场'],
				colors: ['#007aff'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'text'
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>


<style lang="scss">
	// 公共样式
	.common{
		margin: 5% auto;
		width: 700rpx;
	}
	.cc{
		position: relative;
		display: flex; 
		height: 25%;
		width: 100%;
		font-size: 26rpx;
	}
	.aa{
		flex: 1; 
		margin-top: 2%;
	}
	.aa_text{
		position: absolute;
		left: 0;
	}
	.aa_text2{
		position: absolute;
		left: 50%;
	}
	// 选项卡
	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
	.uni-common-mt {
		margin-top: 30px;
	}
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.card_img{
		height: 100%;
		width: 100%;
		border-radius: 20rpx 20rpx;
	}
	// 招标内容
	.container{
		display: flex;
		justify-content: center;
		align-items: center; 
		height: 300rpx;
		box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
		border-radius: 20rpx 20rpx;
	}
	.containers{
		width: 90%;
		height: 90%;
	}
</style>
